<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <link rel="stylesheet" href="/static/base/common/css/sapar.css"/>
    <link rel="stylesheet" href="/static/base/static/css/index_inner.css"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/modules/layer/default/layer.css" media="all">
    <title>居民与房屋管理-主页</title>
    <style type="text/css">
        .red{
            border: 1px red solid;
        }

    </style>
</head>


<body>
<div id="container" style="width: 98%;margin: 0 auto" class="layui-fluid">

    <form class="layui-form" action="" style="margin-top: 20px;">
        <div class="layui-collapse" lay-filter="test">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">业主信息</h2>
                <div class="layui-colla-content layui-show-xs-block">
                    <table class="layui-table">

                        <tr>
                            <td width="150px" >代表人/业主</td>
                            <td>
                                <div class="layui-inline ">
                                    <input type="text" name="name" autocomplete="off" placeholder="请输入户主姓名" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td >业主联系电话</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="tellphone" autocomplete="off"  placeholder="请输入业主联系电话" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>业主身份证号码</td>
                            <td >
                                <div class="layui-inline">
                                    <input type="text" name="idCard" autocomplete="off"  placeholder="业主身份证号码" class="layui-input">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">房屋产权信息</h2>
                <div class="layui-colla-content">
                    <table class="layui-table">
                        <tr>
                            <td width="150px">房屋编号</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="houseNum" autocomplete="off" placeholder="请输入房屋编号" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>房产证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="cardNum"  autocomplete="off" placeholder="请输入房产证号" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>房屋凭证</td>
                            <td>
                                <div class="layui-input-inline">
                                    <select name="houseCoucher">
                                        <option value="" disabled>请选择房屋凭证</option>
                                        <option value="1">房屋所有权证</option>
                                        <option value="2">房屋使用权证</option>
                                    </select>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td>房屋权证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="houseWarrant" autocomplete="off" placeholder="请输入房屋产权证号" class="layui-input">
                                </div>
                            </td>


                        </tr>
                        <tr>
                            <td>房屋权证发放时间</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" id="time" name="time" autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>住房地址</td>
                            <td>
                                <div class="layui-input-inline">
                                    <select name="province" id="province" lay-filter="province"></select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="city" id="city" lay-filter="city"></select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="county" id="county" lay-filter="county"></select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="town" id="town" lay-filter="town"></select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="village" id="village" lay-filter="village"></select>
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>详细地址</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="address"  autocomplete="off" placeholder="请输入地址" class="layui-input">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">房屋信息</h2>
                <div class="layui-colla-content">
                    <table class="layui-table">
                        <tr>
                            <td>建筑物名称</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="buildName" autocomplete="off"  placeholder="请输入建筑物名称" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>建成年份</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="buildTime" autocomplete="off" placeholder="请输入建成年份" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>建筑物用途</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="checkbox" checked name="buildUse" lay-skin="primary" value="住宅" title="住宅">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="商业" title="商业">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="办公" title="办公">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="工业" title="工业">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="综合" title="综合">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="仓储" title="仓储">
                                    <input type="checkbox" name="buildUse" lay-skin="primary" value="其他" title="其他">
                                </div>
                            </td>

                        </tr>

                        <tr>
                            <td>物管单位名称</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="tubeUnit" autocomplete="off" placeholder="请输入物管单位名称" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>本户建筑面积（㎡）</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <input type="text" name="area"  autocomplete="off" placeholder="请输入建筑面积" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>房屋结构</td>
                            <td colspan="2">
                                <div id="structure" class="layui-inline">
                                    <input type="radio" checked name="structure" lay-skin="primary" value="钢、钢筋混泥土结构" title="钢、钢筋混泥土结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="钢结构" title="钢结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="钢筋混泥土结构" title="钢筋混泥土结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="混合结构" title="混合结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="砖木结构" title="砖木结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="木结构" title="木结构">
                                    <input type="radio" name="structure" lay-skin="primary" value="简易棚" title="简易棚">
                                    <input type="radio" name="structure" lay-skin="primary" value="其他" title="其他">
                                </div>
                            </td>

                        </tr>

                        <tr>
                            <td>房屋用途</td>
                            <td colspan="2">
                                <div id="houseUse" class="layui-inline">
                                    <input type="radio" checked name="houseUse" lay-skin="primary" value="住宅" title="住宅">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="宿舍" title="宿舍">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="临时工棚" title="临时工棚">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="办公用房" title="办公用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="商业用房" title="商业用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="教科文体医用房" title="教科文体医用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="工业用房" title="工业用房">
                                    <input type="radio" name="houseUse" lay-skin="primary" value="其他"  title="其他">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td rowspan="2">房屋来源</td>
                            <td style="text-align: center">
                                自有产权
                            </td>
                            <td>租赁公房</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="houseFrom" lay-skin="primary" value="购买商品用房" title="购买商品用房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="购买房改房" title="购买房改房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="购买经济适用房" title="购买经济适用房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="个人自建房" title="个人自建房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="其他形式取得" title="其他形式取得">
                                </div>
                            </td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="单位自管公房" title="单位自管公房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="政府公管公房" title="政府公管公房">
                                    <input type="radio" name="houseFrom" lay-skin="primary" value="个人私有" title="个人私有">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>房屋户型</td>
                            <td colspan="2">
                                <div class="layui-inline">
                                    <select name="huxing" lay-filter="aihao">
                                        <option value=""></option>
                                        <option value="0">三室两厅一卫</option>
                                        <option value="1">二室二厅一厨一卫</option>
                                        <option value="2">三室二厅一厨一卫</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">土地信息</h2>
                <div class="layui-colla-content">
                    <table class="layui-table">
                        <tr>
                            <td width="150px">土地取得方式</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="landGet" value="拍卖" title="拍卖">
                                    <input type="radio" name="landGet" value="划拨" title="划拨">
                                    <input type="radio" name="landGet" value="转让" title="转让">
                                    <input type="radio" name="landGet" value="承租" title="承租">
                                    <input type="radio" name="landGet" value="其他" title="其他">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>批准土地面积</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="langArea" autocomplete="off" placeholder="批准土地面积" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>实际使用土地面积</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="number" name="landUsearea" autocomplete="off" placeholder="请输入实际使用土地面积" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>批准土地用途</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landPurpose" autocomplete="off" placeholder="请输入土地用途" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>实际土地用途</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landUsepurpose" autocomplete="off" placeholder="请输入实际土地用途" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>批准使用年限</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landYear" autocomplete="off" placeholder="请输入使用年限" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>土地证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landNum" autocomplete="off" placeholder="请输入土地证号" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>土地凭证</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="landCoucher" value="国有土地使用证" title="国有土地使用证">
                                    <input type="radio" name="landCoucher" value="集体土地使用证" title="集体土地使用证">
                                    <input type="radio" name="landCoucher" value="宅基地证明" title="宅基地证明">
                                </div>
                            </td>


                        </tr>
                        <tr>
                            <td>土地权证号</td>
                            <td>
                                <div class="layui-inline">
                                    <input  type="text" name="landWarrant" autocomplete="off" placeholder="请输入土地权证号" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>土地权证发证时间</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landTime" autocomplete="off" placeholder="请输入土地证号" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>产权人类型</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="radio" checked name="landTopr" value="单位" title="单位">
                                    <input type="radio" name="landTopr" value="个人" title="个人">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>产权人姓名</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landUname" autocomplete="off" placeholder="请输入产权人姓名" class="layui-input">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>产权人证件类型</td>
                            <td>
                                <div class="layui-inline">
                                    <select name="landIdtype">
                                        <option value="" disabled="disabled">选择证件类型</option>
                                        <option value="居民身份证">居民身份证</option>
                                        <option value="临时身份证">临时身份证</option><!-- disabled = "" 则是不可选 -->
                                        <option value="港澳居民来往内地通行证">港澳居民来往内地通行证</option>
                                        <option value="外国人居留证">外国人居留证</option>
                                        <option value="护照">护照</option>
                                    </select>
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>产权人证件号码</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text" name="landIdCard"  autocomplete="off" placeholder="请输入证件号码" class="layui-input">
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>产权人联系电话</td>
                            <td>
                                <div class="layui-inline">
                                    <input type="text"  name="landTel" autocomplete="off" placeholder="请输入产权人联系电话" class="layui-input">
                                </div>
                            </td>

                        </tr>


                    </table>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="width: 98%;margin: 20px auto">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>



</body>



<script type="text/javascript" src="/static/webjars/layui/layui.all.js"></script>
<script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
<script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
<script type="text/javascript" src="/static/base/static/js/index_inner.js"></script>
<script>

    var deviceWidth = document.documentElement.clientWidth;

    if (deviceWidth >1080) {deviceWidth=1080;}
    document.documentElement.style.fontSize =deviceWidth/25+"px";



    var layedit = layui.layedit;
    var layer = layui.layer;
    var form = layui.form;
    var laydate = layui.laydate;
    var upload = layui.upload;

    //日期
    laydate.render({
        elem: '#time'
    });


    //创建一个编辑器
    var editIndex = layedit.build('LAY_demo_editor');

    //自定义验证规则
    form.verify({
        title: function(value){
            if(value.length < 5){

                return '标题至少得5个字符啊';
            }
        }
        ,pass: [/(.+){6,12}$/, '密码必须6到12位']
        ,content: function(value){
            layedit.sync(editIndex);
        }
        ,notnull: function(value){


        }
    });



    function checkNotNull(){
        var flag = true;
        $("input[type='text']").each(function(){

            if ("" == $(this).val()) { //判断元素对象的value值
                $(this).addClass("red"); //添加css样式
                flag = false;
            }else{
                $(this).removeClass("red");
            }
            var divBox = $(this).parent().parent().parent().parent().parent().parent();
            if($(this).attr("class") =="layui-input red" && divBox.attr("class") != "layui-colla-content layui-show"){
                divBox.addClass("layui-show")
            }

        });
        return flag;
    }


    //监听提交
    form.on('submit(demo1)', function(data){
        var flag= true;//判断是否数据格式都填写正确
        console.log(flag);
        if(!checkNotNull()){
            layer.msg('还有未填写的地方哦',{time:2000, shift: 6, icon:5},function(){});
            flag = false;
        }else {
            flag = true;
        }

        if(flag){
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth()+1;
            var date = today.getDate();
            var day = today.getDay();
            var hours = today.getHours();
            var minutes	= today.getMinutes();
            var seconds	= today.getSeconds();
            // data.field.name = $("input[name='name']").val();
            // data.field.idCard = $("input[name='idCard']").val();
            // data.field.houseNum = $("input[name='houseNum']").val();
            // data.field.cardNum = $("input[name='cardNum']").val();
            // data.field.houseWarrant = $("input[name='houseWarrant']").val();
            // data.field.time = $("input[name='time']").val();
            data.field.province = $("#province option:selected").text();
            data.field.city = $("#city option:selected").text();
            data.field.county = $("#county option:selected").text();
            data.field.town = $("#town option:selected").text();
            data.field.village = $("#village option:selected").text();
            // data.field.buildName = $("input[name='buildName']").val();
            // data.field.buildTime = $("input[name='buildTime']").val();
            data.field.buildUse = $("input[name='buildUse']").val();
            // data.field.tubeUnit = $("input[name='tubeUnit']").val();
            // data.field.time = $("input[name='time']").val();
            // data.field.area = $("input[name='area']").val();
            // data.field.structure = $("input[name='structure']").val();
            // data.field.structure = $("input[name='structure']").val();
            // data.field.structure = $("input[name='structure']").val();
            // data.field.structure = $("input[name='structure']").val();
            // data.field.createTime = ("" + nowtimestamp).trim();
            // data.field.content = layedit.getContent(editIndex);
            // data.field.eventTypeBig = $("#eventTypeBig option:selected").text();
            // data.field.eventTypeTwo = $("#eventTypeTwo option:selected").text();
            // data.field.province = $("#province option:selected").text();
            // data.field.city = $("#city option:selected").text();
            // data.field.county = $("#county option:selected").text();
            // data.field.town = $("#town option:selected").text();
            // data.field.village = $("#village option:selected").text();
            // data.field.eventSrcname = "网上举报";
            // data.field.eventNature = "一般案件";
            data.field.updateTime = year+"-"+month+"-"+date+" "+hours+":"+minutes+":"+seconds;
            data.field.lastTime = '';
            data.field.uploadName = "李顺时";

            console.log(data.field);
            $.ajax({
                url: '/ajax/save/houseinfo',
                type: 'POST',
                contentType : 'application/json;charset=utf-8',
                //设置请求头信息
                dataType:"json",
                data: JSON.stringify(data.field),
                success: function(data){
                    layer.msg(data.code);
                    nowtimestamp = (new Date()).getTime();
                },
                error: function(res){
                    layer.msg(res);
                }
            });




        }
        return false;
    });



    init();

    function init(){
        initForm();
        getProvince("CN");
    };
    function initForm(){
        form.on('select(province)', function(data){
            $.post("/ajax/pub/getcity",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    $("#city").empty();
                    $("#county").empty();
                    $("#town").empty();
                    $("#village").empty();
                    for(i = 0; i < result.length; i++){
                        document.getElementById("city").options.add(new Option(result[i].name,result[i].code));
                    }
                    form.render();
                }
            );
        });
        form.on('select(city)', function(data){
            $.post("/ajax/pub/getcounty",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    $("#county").empty();
                    $("#town").empty();
                    $("#village").empty();
                    document.getElementById("county").options.add(new Option("请选择市",""));
                    for(i = 0; i < result.length; i++){
                        document.getElementById("county").options.add(new Option(result[i].name,result[i].code));
                    }
                    form.render();
                }
            );
        });
        form.on('select(county)', function(data){
            $.post("/ajax/pub/gettown",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    $("#town").empty();
                    $("#village").empty();
                    for(i = 0; i < result.length; i++){
                        document.getElementById("town").options.add(new Option(result[i].townName,result[i].townId));
                    }
                    form.render();
                }
            );
        });
        form.on('select(town)', function(data){
            console.log(data.value);
            $.post("/ajax/pub/getvillage",{code: data.value},
                function (result) {
                    //输出
                    //执行清空
                    $("#village").empty();
                    for(i = 0; i < result.length; i++){
                        document.getElementById("village").options.add(new Option(result[i].villageName,result[i].villageName));
                    }
                    form.render();
                }
            );
        });
    }

    function getProvince(code){
        $.post("/ajax/pub/getprovince",{code: code},
            function (result) {
                for(i = 0; i < result.length; i++){
                    document.getElementById("province").options.add(new Option(result[i].name,result[i].code));
                }
                form.render('select');
            }
        );

    }



</script>



</html>
